<template>
	<div>
		<div class="header">
			<div class="header-lift" :class="{ collapsed: collapsed }">
				<div class="img-body">
					<img src="@/assets/logo.png" />
				</div>
				<span>安全服务管理平台</span>
			</div>
			<div class="header-right">
				<div class="breadcrumb">
					<img src="@/assets/images/icon-home.png" />
					<p>{{ $store.state.breadcrumb.text }}</p>
				</div>
			</div>
			<div class="isLogin">
				<div class="user-info">
					<a-dropdown :trigger="['click']">
						<div class="dropdown" @click.prevent>
							<img src="@/assets/images/avatar.png" class="avatar" />
							<span class="username">{{ user.loginId }}</span>
							<CaretDownFilled />
						</div>
						<template #overlay>
							<a-menu>
								<a-menu-item key="1" @click="open()">二次验证码</a-menu-item>
								<a-menu-divider />
								<a-menu-item key="3" @click="logout()">退出登录</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
			</div>
		</div>
    <div class="qr-box" v-show='isShowQr'>
      <h2>申领验证码 <span style="float: right;" @click="isShowQr=false;"> <a >关闭</a> </span></h2>
      <p>为了您的账户安全建议使用以下方式开启二次验证</p> 
      <p>方法一：可以通过微信查找“二次验证码”的小程序进行识别下方二维码来添加并同步您的动态二次验证码。</p> 
      <p>方法二：在手机应用市场下载谷歌APP进行扫描下方二维码来同步动态二次验证码。</p> 
      <div class="qr-code" id="qrcode"></div>
      <font style="color:red">点击按钮将开启二次验证码登录方式来保障您的账号安全;</font> 
      <a-button type="primary" block class="login-btn" @click="toLogin()">确认已经绑定验证码，立即开启二次验证模式。</a-button>
    </div>
	</div>
</template>
<script>
import { CaretDownFilled } from "@ant-design/icons-vue";
import httpRequest from "@/util/httpRequest";
import { Menu, Dropdown, Button } from "ant-design-vue";
import { nextTick } from "q";
import { qrcanvas } from "qrcanvas";
import { message } from "ant-design-vue";
export default {
  name: "Header",
  components: {
    CaretDownFilled,
    AButton: Button,
    AMenu: Menu,
    AMenuItem: Menu.Item,
    AMenuDivider: Menu.Divider,
    ADropdown: Dropdown
  },
  props: {
    routeName: {
      type: String,
      default: ""
    },
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    return {};
  },
  data() {
    return {
      isShowQr: false,
      options: {},
      user: {},
      userData: {},
      otpUrl: ""
    };
  },
  mounted() {
    if (sessionStorage.getItem("user")) {
      this.user = JSON.parse(sessionStorage.getItem("user"));
    }
    httpRequest.post("获取当前登录管理员详情").then(res => {
      this.userData = res.data;
      nextTick(() => {
        let cavas = qrcanvas({
          data:
            // "https://www.google.com/chart?chs=100x100&chld=M|0&cht=qr&chl=" +
            res.data["otp_url"],
          size: 150
        });
        document.getElementById("qrcode").innerHTML = "";
        document.getElementById("qrcode").appendChild(cavas);
      });
    });
  },
  methods: {
    logout() {
      httpRequest
        .post("logout", {})
        .then(() => {})
        .finally(() => {
          sessionStorage.removeItem("user");
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        });
    },
    back() {
      this.$router.go(-1);
    },
    open() {
      this.isShowQr = true;
    },
    toLogin() {
      httpRequest
        .post("开启关闭二次验证", {otpStatus:'Y'})
        .then(() => {
          message.success("已开启二次验证！");
          this.logout();
        })
      
    }
  }
};
</script>
<style scoped lang="less">
.qr-box {
  position: absolute;
  right: 178px;
  z-index: 99;
  text-align: left;
  padding: 21px;
  border: 1px solid #c8c8c8;
  border-radius: 12px;
  background: #fbfbfb;
  box-shadow: 18px 22px 30px #888;
  h2 {
    margin: 0;
    border-bottom: 1px solid #fdfd;
  }
  p {
    margin: 0;
    font-size: 18px;
  }
  .qr-code {
    position: relative;
    margin: auto;
    width: 190px;
  }
}
.header {
  height: 72px;
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: space-between;
  .header-lift {
    display: flex;
    background: #fff;
    height: 72px;
    width: 240px;
    text-align: center;
    transition: width 0.2s;
    flex-shrink: 0;
    .img-body {
      margin-left: 25px;
      width: 38px;
      height: 38px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    span {
      font-size: 18px;
      font-weight: bold;
      color: #378ef0;
      margin: 5px 10px;
    }
    &.collapsed {
      width: 60px;
      span {
        display: none;
      }
      .img-body {
        margin: 0 auto;
      }
    }
  }
  .header-right {
    flex-grow: 1;
    margin-left: 36px;
    text-align: left;
    font-size: 16px;
    color: #333333;
    .i-p {
      padding: 10px;
    }
    a {
      color: #999999;
    }
  }
}
.home-message {
  display: flex;
  align-items: center;
  img {
    margin-right: 10px;
  }
  .time {
    color: #999;
  }
}
.breadcrumb {
  display: flex;
  align-items: center;

  img {
    margin-right: 5px;
  }
  p {
    font-size: 12px;
    color: #555;
    line-height: normal;
    margin: 0;
  }
}
.isLogin {
  background: #fff;
  padding-right: 50px;
  .no-login {
    display: flex;
    align-items: center;
    a {
      font-size: 18px;
      color: #333;
      margin: 0 15px;
    }
  }
  .dropdown {
    cursor: default;
    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }
    .username {
      margin: 0 10px;
    }
  }
}
</style>
